<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="stripes" uri="http://stripes.sourceforge.net/stripes.tld" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<stripes:useActionBean beanclass="simple.web.UsersActionBean" var="bean"/>
<stripes:layout-render name="${pageContext.request.contextPath}/stripes/default.jsp" title="Autocomplete Users">
    <stripes:layout-component name="JS">
        <script type="text/javascript">
            $(function() {
                var availableUsers = [
                    <c:forEach items="${ bean.users }" var="user" varStatus="loop">
                    "${user.firstName} ${user.lastName}"<c:if test="${fn:length(bean.users) > loop.index + 1}">,</c:if>
                    </c:forEach>
                ];
                $("#users").autocomplete({
                    source: availableUsers
                });
            });
        </script>
        <style type="text/css">
            .ui-autocomplete-loading {
                background: white url('${pageContext.request.contextPath}/images/ajax-loader.gif') right center no-repeat;
            }
            #users {
                width: 25em;
            }
        </style>
    </stripes:layout-component>
    <stripes:layout-component name="contents">
        <p>Autocomplete Users</p>
        <div class="ui-widget">
            <label for="users">Users: </label>
            <input id="users"/>
        </div>
    </stripes:layout-component>
</stripes:layout-render>